<template>
    <div class="layout">
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-aside :width="isCollapse ? '64px' : '200px'" style="transition: width 0.5s;background-color: #545c64"
            class="hidden-md-and-down"
            >
                <navigation :isCollapse="isCollapse"/>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="header">
                        <div>
                            <div class="isCollapse hidden-md-and-down" @click="isCollapse = !isCollapse">
                                <i class="el-icon-s-fold"></i>
                            </div>
                            <div class="isCollapse hidden-lg-and-up" @click="drawer = true">
                                <i class="el-icon-s-fold"></i>
                            </div>
                        </div>
                        <div>
                            <!-- <el-avatar>user</el-avatar> -->
                            <el-dropdown @command="dropdown">
                                <el-avatar style="cursor: pointer;">user</el-avatar>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="1">前台</el-dropdown-item>
                                    <el-dropdown-item command="2">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>
                <el-main style="background-color: #eee;" class="scrollber">
                    <!-- <div class="brend">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item v-for="(item,index) in routerList" :key="index" :to="{ path: item.path }">{{ item.meta.title }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div> -->
                    <router-view/>

                    <footerVue v-show="!$route.meta.footerNoShow"/>

                </el-main>
            </el-container>
        </el-container>

        <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        direction="ltr"
        :before-close="() => drawer = false"
        size="50%"
        >
            <navigation @select="drawer = false" style="background-color: #545c64;width: 100%;height: 100%;"/>
        </el-drawer>
    </div>
</template>

<script>
import { RouterView } from 'vue-router';
import { mapGetters } from 'vuex'
import navigation from '@/components/base/navigation.vue';
import footerVue from '@/components/footer/footer.vue';
export default {
    computed: {
        ...mapGetters(['layout','routerList','defaultActive'])
    },
    data() {
        return {
            isCollapse: false,
            drawer : false
        };
    },
    components: {
        RouterView, 
        navigation,
        footerVue
    },
    methods : {
        dropdown(type){
            if(type == 1){
                this.$router.push('/student/homePaper')
            } else if(type == 2){
                this.$router.push('/login?type=Logout')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .layout{
        height: 100vh;
        width: 100vw;
        .header{
            display: flex;
            align-items: center;
            height: 60px;
            justify-content: space-between;
            &>div{
                display: flex;
                align-items: center;
            }
            .isCollapse{
                height: 60px;
                line-height: 60px;
                font-size: 30px;
                width: 60px;
                cursor: pointer;
                color: #333;
            }
        }
    }
    .el-main{
        .brend{
            display: flex;
            align-items: center;
            background: white;
            height: 40px;
            padding: 0px 10px;
            margin-top: -10px;
            border-radius: 3px;
        }
    }
</style>